<template>
  <div class="delivery fixt">
    <!-- <tabulation ref="Tabulation"></tabulation> -->
    <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad" :offset="30">
      <div class="zwlb">
        <ul>
          <li v-for="(item,index) in list" :key="index+'list'" @click="details('careerfair',item.id)">
            <div class="zwlbnr">
              <p class="zwlbbt">
                {{item.title}}

              </p>
              <p>
                {{item.holdStartDate | timedate}} <span v-if="item.holdEndDate">-</span>{{item.holdEndDate | timedate}}
              </p>
              <p>
                {{item.holdStartTime | timestr}} <span v-if="item.holdStartTime">-</span>{{item.holdEndTime | timestr}}
                <!-- <span class="zwlbsj">审核中</span> -->
              </p>
            </div>
            <div class="jobfairim" v-if="item.topStatus===1"><img class="jobimg" src="@/assets/img/zhiding.png" alt="">
            </div>
            <!-- <van-divider color="#E8E8E8" />
            <div style="margin-bottom:0.2133rem">
              <van-row>
                <van-col span="12"><span class="buttontab" @touchstart="details('careerfair')">查看</span></van-col>
                <van-col span="12"><span class="buttontab">预定</span></van-col>
              </van-row>
            </div> -->

          </li>
        </ul>
      </div>
    </van-list>

  </div>
</template>

<script>
import JOBFAIR from '@/api/Jobfair'
import { _debounce } from '@/assets/js/public'
export default {
  data () {
    return {
      active: 1,
      activlist: ['招聘中', '已下线', '审核中', '未过审'],
      btnshow: 1,
      reslit: {
        name: '远大科技有限公司',
        scaleText: '100-499人',
        natureText: '私营企业'
      },
      pageInfo: {
        page: 1,
        size: 10
      },
      list: [],
      loading: false,
      finished: false
    }
  },
  filters: {
    timedate (val) {
      if (val) {
        let datatime = new Date(val)
        let Year = datatime.getFullYear() + '年'
        let Month = (datatime.getMonth() + 1 < 10 ? '0' + (datatime.getMonth() + 1) : datatime.getMonth() + 1) + '月'
        let Dated = datatime.getDate() + '日'
        let time = Year + Month + Dated
        return time
      }
    },
    timestr (val) {
      if (val) {
        return val.substr(0, 5)
      }
    }

  },
  methods: {

    details (name, id) {
      this.$router.push({
        name: name,
        query: {
          id: id
        }
      })
    },
    // 招聘会列表
    jobfairListpage () {
      let that = this
      let params = {}
      params.page = that.pageInfo.page
      params.size = that.pageInfo.size
      params.ms = 1
      JOBFAIR.jobfairListpage(params).then(res => {
        console.log(res.data)
        that.loading = false
        if (res.data.code === 200) {
          if (!res.data.data.records || res.data.data.records.length === 0) {
            // 加载结束
            that.finished = true
            return
          } else {
            // for (let i = 0; i < res.data.data.records.length; i++) {
            //   res.data.data.records[i].refreshTime = timedate(
            //     res.data.data.records[i].refreshTime
            //   )
            // }
            for (let i = 0; i < res.data.data.records.length; i++) {
              that.list.push(res.data.data.records[i])
            }
            that.finished = false
          }

          // 如果列表数据条数>=总条数，不再触发滚动加载
          if (that.list.length >= res.data.data.total) {
            that.finished = true
          }
        }
        console.log(that.finished, 'that.finished ')
      })
    },
    // 上拉加载
    onLoad: _debounce(function (_type, index, item) {
      let that = this
      console.log(that.pageInfo.page, 'that.pageInfo.page')

      that.loading = false

      that.pageInfo.page++
      that.jobfairListpage()
    }, 2000)
  },
  created () {
    this.jobfairListpage()
  }
}
</script>

<style scoped>
.buttontab {
  display: inline-block;
  width: 292px;
  height: 40px;
  line-height: 40px;
  background: rgba(24, 147, 252, 1);
  border: 1px solid rgba(24, 147, 252, 1);
  font-size: 26px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 6px;
}
.jobfairim {
  position: absolute;
  top: 0;
  right: 0;
}
.jobimg {
  width: 87px;
  height: 87px;
}
.zwlbbt {
  font-weight: bold;
}
</style>
